<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(item, index) of list">
            {{item}}-->{{index}}
        </div>
        <button @click="changeArrHandle">测试修改数组数据</button>
        <button @click="changeAllArrHandle">测试整体修改数组数据</button>

        <hr>
        <span>循环两次-使用template模板占位符，页面渲染不会生成实际标签</span>
        <template v-for="(item, index) of list">
            <div>
                {{item}}-->{{index}}
            </div>
            <span>
                {{item}}
            </span>
        </template>

        <hr>
        <span>循环对象</span>
        <div v-for="(item, key, index) of userInfo">
            {{item}}-->{{key}}-->{{index}}
        </div>
        <button @click="changeObjHandle">测试修改对象数据</button>
        <button @click="changeAllObjHandle">测试整体修改对象数据</button>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                list : [
                    "zhangsan",
                    "lisi",
                    "wangwu",
                    "zhaoliu",
                    "huangqi"
                ],
                userInfo : {
                    name : "张三",
                    age : 28 ,
                    gender : 'femail'
                }
            },
            methods : {
                changeArrHandle : function(){
                    this.list.splice(1, 1, "haha")
                },
                changeAllArrHandle : function(){
                    this.list = ["宗华", "水淼", "火炎" ,"饕餮"]
                },
                changeObjHandle : function () {
                    this.userInfo.name = "水梦星光"
                    this.userInfo.address = "江苏苏州工业园区景城学校"
                },
                changeAllObjHandle : function () {
                    this.userInfo = {
                        key : "keyInfo" ,
                        value : "valueInfo"
                    }
                }
            }
        })

        // set方法赋值
        vm.$set(vm.userInfo, "interest", "booking")
    </script>
</body>
</html>